<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>迷笛乐理考试练习卷</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="__PUBLIC__/assets/js/jquery-1.10.2.min.js"></script>
	<!-- <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> -->
	<style>
	*{
		margin:0px;
		padding:0px;
	}
	body{
		width:100%;overflow-x:hidden;
	}
	h3{
		font-size:20px;
		margin:15px 0;
	}
	h4{
		font-size:18px;
		margin:15px 0;
	}
		.newp p:first-child{display: inline-block;}
		.midi_test_page_box
		{
			overflow:hidden;
			padding: 0 10px;
		}
		.midi_test_page_box img{
			max-width:100%;
			overflow:hidden;
		}

		input[type=text],input[type=submit],input[type=button]{
			display:block;
			overflow:hidden;
			width:100%;
			border:solid 1px #ccc;
			border-radius:6px;
			line-height:20px;
			font-size:18px;
			padding:5px 8px;
			text-align:center;
			margin:10px auto;
			cursor: pointer;
			-webkit-appearance: none;
		}
		input[type=button],input[type=submit]{
			padding:8px;
			background:#007aff;
			color:#fff;
			font-size:16px;
			border:none;
		}
		input[type=text]{
			width:90%;
		}
		.newp{
			width:100%;
			margin:10px auto;
			overflow:hidden;
			display:block;
		}
		.newp p{
			margin:8px auto;
		}
		select{
			width:90%;
			padding:8px 12px;
			border-radius:6px;
			overflow:hidden;
			display:block;
			margin:10px auto;
		}
		audio{
			clear: both;
		}
		.midi_zhez_box{
		width:100%;
		display:none;
	}
	.midi_zhez_bg{
		position:fixed;
		width:100%;
		height:100%;
		top:0px;
		left:0px;
		background:rgba(0,0,0,0.5);
		z-index:1;
	}
	.midi_def_cmt{
		position:fixed;
		width:150px;
		height:60px;
		top:50%;
		left:50%;
		margin-left:-75px;
		margin-top:-30px;
		background:#fff;
		z-index:2;
		border-radius:12px;
		text-align:center;
		padding:18px 10px;
	}
	.midi_def_cmt span{
		display:block;
		line-height:30px;
	}
	</style>
</head>
<body>
<form action="__CONTROLLER__/examScore" method="post">
<div class="midi_test_page_box">
<!-- <div class="midi_zhez_box">
		<div class="midi_zhez_bg"></div>
		<div class="midi_def_cmt"><span>您的最终得分是{$total_score}</span></div>
	</div> -->
<h3>视唱（20分）</h3>
<style type="text/css">
	.naudio_cmt{
		overflow: hidden;

	}
	.naudio_box{
    		position: relative;
    		display: block;
    		 width:100%;
    		height:36px;
			margin-bottom: 20px;
    	}
    	.naudio_box .naudio_test{
    		position: absolute;
    		top:0px;
    		left: 0px;
    		width:100%;
    		height:50px;
    		z-index:2;
    		opacity:0;


    	}
    	.naudio_test2{
    		position: absolute;
    		top:0px;
    		left: 0px;
    		width:100%;
    		height:100%;
    		z-index:1;
    	}
		.kan_daan{
			width:35%!important;
			display: inline-block!important;
		}
</style>
<h4>一、演唱下列音符的音高（每题0.5分，共计10分，给出标准音，同学自我打分）</h4>
<foreach name="ti" item="v">
	<div class="newp">
		{$key+1}.&nbsp;{$v.examquestion_content}
		<!-- <input type="button" name="{$v.examquestion_id}" answer="{$v.examquestion_answer}" value="按住视唱"> -->
		<!-- <input class="naudio_test "type="file"  accept="audio/*" capture="microphone" value="按住视唱" name="{$v.examquestion_id}" answer="{$v.examquestion_answer}"/> -->
		<!-- 答案:<audio src="{$v.examquestion_answer}" controls="controls" preload="none"></audio> -->
<!-- 		<div class="naudio_cmt">
			<div class="naudio_box">
				<input class="naudio_test" type="file"  accept="audio/*" capture="microphone" name="" value=""/>
				<input type="button" class="naudio_test2" name="{$v.examquestion_id}" answer="{$v.examquestion_answer}" value="点击视唱">
			</div>
			<audio class="naudio" controls="" accept="audio/*" capture="microphone" style="display: none;"></audio>
		</div> -->
		<input type="button" class="kan_daan" value="点击查看答案" style="background-color: #01b1b7">
		<p class="daan_show" style="display: none;">
		正确答案:<audio src="{$v.examquestion_answer}" controls="controls" preload="none" ></audio>
		<p>
	</div>
</foreach>
<h4>二、演唱下列音阶与音程模进（每题1分，共计5分）</h4>
<foreach name="tj" item="v">
	<div class="newp">
		<!-- {$key+1}.&nbsp;{$v.examquestion_content}
		<input type="button" name="{$v.examquestion_id}" answer="{$v.examquestion_answer}" value="按住视唱">
		答案:<audio src="{$v.examquestion_answer}" controls="controls" preload="none"></audio> -->
		{$key+1}.&nbsp;{$v.examquestion_content}
		<!-- <div class="naudio_cmt">
			<div class="naudio_box">
				<input class="naudio_test "type="file"  accept="audio/*" capture="microphone" name="" value=""/>
				<input type="button" class="naudio_test2" name="{$v.examquestion_id}" answer="{$v.examquestion_answer}" value="点击视唱">
			</div>
			<audio class="naudio" controls="" accept="audio/*" capture="microphone" style="display: none;"></audio>
		</div> -->
		<input type="button" class="kan_daan" value="点击查看答案" style="background-color: #01b1b7">
		<p class="daan_show" style="display: none;">
		正确答案:<audio src="{$v.examquestion_answer}" controls="controls" preload="none" ></audio>
		<p>
	</div>
</foreach>
<h4>三、演唱下列旋律（每题1分，共计5分）</h4>
<foreach name="tk" item="v">
	<div class="newp">
		{$key+1}.&nbsp;{$v.examquestion_content}
		<!-- <input type="button" name="{$v.examquestion_id}" answer="{$v.examquestion_answer}" value="按住视唱">
		答案:<audio src="{$v.examquestion_answer}" controls="controls" preload="none"></audio> -->

		<!-- <div class="naudio_cmt">
			<div class="naudio_box">
				<input class="naudio_test "type="file"  accept="audio/*" capture="microphone" name="" value=""/>
				<input type="button" class="naudio_test2" name="{$v.examquestion_id}" answer="{$v.examquestion_answer}" value="点击视唱">
			</div>
			<audio class="naudio" controls="" accept="audio/*" capture="microphone" style="display: none;"></audio>
		</div> -->
		<input type="button" class="kan_daan" value="点击查看答案" style="background-color: #01b1b7">
		<p class="daan_show" style="display: none;">
		正确答案:<audio src="{$v.examquestion_answer}" controls="controls" preload="none"></audio>
		<p>
	</div>
</foreach>
	<div style="width:100%;display:block;overflow:hidden;margin:auto;">
	<input type="button" onclick="location.href='__CONTROLLER__/createExampaper'" value="重新考试" style="margin:20px 2%;float:left;width:46%;background-color: #01b1b7">
	</div>
</div>
</form>
	<script>
        $(function () {
            $(".naudio_test").change(function () {
                var objUrl = getObjectURL(this.files[0]);
                // $(".naudio").attr("src", objUrl);
                 $(this).parent().parent().children(".naudio").attr("src", objUrl);
                // $(".naudio").show();
                $(this).parent().parent().children(".naudio").show();
            });
            $('.kan_daan').click(function(){
            	$(this).siblings('.daan_show').toggle();
            })
        });
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
		$(function(){
			var midi_zhez_box=$('.midi_zhez_box');
			var midi_zhez_bg=$('.midi_zhez_bg');
			var ckdf_btn=$('.ckdf_btn');
			ckdf_btn.click(function(){
				midi_zhez_box.show(100);
			})
			midi_zhez_bg.click(function(){
				midi_zhez_box.hide(100);
			})
		})
    </script>
</body>
</html>